<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day01-小程序基础 | 武汉设计工程学院yyds</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/xcx_dx/favicon.ico">
    <link rel="apple-touch-icon" href="/xcx_dx/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/xcx_dx/assets/css/0.styles.e1df3f18.css" as="style"><link rel="preload" href="/xcx_dx/assets/js/app.c36966b9.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/2.13776caa.js" as="script"><link rel="preload" href="/xcx_dx/assets/js/3.9977063c.js" as="script"><link rel="prefetch" href="/xcx_dx/assets/js/10.03e33fcc.js"><link rel="prefetch" href="/xcx_dx/assets/js/11.cead7584.js"><link rel="prefetch" href="/xcx_dx/assets/js/12.bcd5da7d.js"><link rel="prefetch" href="/xcx_dx/assets/js/13.8aa3d205.js"><link rel="prefetch" href="/xcx_dx/assets/js/14.6565609c.js"><link rel="prefetch" href="/xcx_dx/assets/js/15.1e819a14.js"><link rel="prefetch" href="/xcx_dx/assets/js/16.d240c4eb.js"><link rel="prefetch" href="/xcx_dx/assets/js/17.1054f905.js"><link rel="prefetch" href="/xcx_dx/assets/js/18.7e22f3ac.js"><link rel="prefetch" href="/xcx_dx/assets/js/4.1f2503c5.js"><link rel="prefetch" href="/xcx_dx/assets/js/5.9aeec249.js"><link rel="prefetch" href="/xcx_dx/assets/js/6.8d7d3795.js"><link rel="prefetch" href="/xcx_dx/assets/js/7.17973866.js"><link rel="prefetch" href="/xcx_dx/assets/js/8.d6f94428.js"><link rel="prefetch" href="/xcx_dx/assets/js/9.ce80b26f.js">
    <link rel="stylesheet" href="/xcx_dx/assets/css/0.styles.e1df3f18.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xcx_dx/" class="home-link router-link-active"><img src="/xcx_dx/doraameng.jpg" alt="武汉设计工程学院yyds" class="logo"> <span class="site-name can-hide">武汉设计工程学院yyds</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/xcx_dx/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/01" class="sidebar-heading clickable open active"><span>1-小程序基础</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/xcx_dx/xcx/01.html" aria-current="page" class="active sidebar-link">day01-小程序基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_01-小程序课程安排-第一天课程内容" class="sidebar-link">01.小程序课程安排&amp;第一天课程内容</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#课程安排" class="sidebar-link">课程安排</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#课程成果" class="sidebar-link">课程成果</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_02-开发前准备-账号申请" class="sidebar-link">02.开发前准备—账号申请</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小程序的概念" class="sidebar-link">小程序的概念</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#注册账号" class="sidebar-link">注册账号</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_03-开发前准备-完善信息-获取appid" class="sidebar-link">03.开发前准备—完善信息&amp;获取appid</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#完善小程序信息" class="sidebar-link">完善小程序信息</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#获取appid" class="sidebar-link">获取AppID</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_04-开发前准备-下载-安装微信开发者工具" class="sidebar-link">04.开发前准备—下载&amp;安装微信开发者工具</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#微信开发者工具介绍" class="sidebar-link">微信开发者工具介绍</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_05-创建第一个小程序项目" class="sidebar-link">05.创建第一个小程序项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#创建小程序" class="sidebar-link">创建小程序</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_06-小程序目录结构" class="sidebar-link">06.小程序目录结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-2" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小程序文件类型" class="sidebar-link">小程序文件类型</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#文件作用" class="sidebar-link">文件作用</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_7-全局配置-pages" class="sidebar-link">7.全局配置—pages</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#配置文件简介" class="sidebar-link">配置文件简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#全局配置" class="sidebar-link">全局配置</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_8-全局配置-window" class="sidebar-link">8.全局配置—window</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#window" class="sidebar-link">window</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_9-全局配置-tabbar" class="sidebar-link">9.全局配置—tabBar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#tabbar" class="sidebar-link">tabBar</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_10-页面配置" class="sidebar-link">10.页面配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#页面配置简介" class="sidebar-link">页面配置简介</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#pages" class="sidebar-link">pages</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_11-调试器和调试" class="sidebar-link">11.调试器和调试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-3" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#调试器" class="sidebar-link">调试器</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_12-编译模式和刷新" class="sidebar-link">12.编译模式和刷新</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#编译模式" class="sidebar-link">编译模式</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_13-实现一个导航布局" class="sidebar-link">13.实现一个导航布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-4" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#布局实现" class="sidebar-link">布局实现</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#参考代码-2" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-2" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_14-小程序适配-响应式单位rpx" class="sidebar-link">14.小程序适配—响应式单位rpx</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-5" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#响应式布局" class="sidebar-link">响应式布局</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#响应式单位rpx" class="sidebar-link">响应式单位rpx</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#其它支持的css单位" class="sidebar-link">其它支持的css单位</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-3" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_15-wxss引入资源" class="sidebar-link">15.wxss引入资源</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-6" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#wxss中使用图片" class="sidebar-link">wxss中使用图片</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#wxss中使用字体图标" class="sidebar-link">wxss中使用字体图标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-4" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_16-模板语法-数据绑定" class="sidebar-link">16.模板语法—数据绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-7" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#数据绑定的步骤" class="sidebar-link">数据绑定的步骤</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#应用场景" class="sidebar-link">应用场景</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-5" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_17-小程序事件-基础" class="sidebar-link">17.小程序事件—基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-17" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#事件" class="sidebar-link">事件</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#事件绑定语法" class="sidebar-link">事件绑定语法</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#事件捕获与冒泡" class="sidebar-link">事件捕获与冒泡</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#回调函数" class="sidebar-link">回调函数</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-6" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_18-小程序事件-事件传参1" class="sidebar-link">18.小程序事件—事件传参1</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-18" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-8" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#事件传参格式" class="sidebar-link">事件传参格式</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#代码实现" class="sidebar-link">代码实现</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-7" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_19-小程序事件-事件传参2" class="sidebar-link">19.小程序事件—事件传参2</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-19" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-9" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#target-vs-currenttarget" class="sidebar-link">target vs currentTarget</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-8" class="sidebar-link">小结</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#事件对象属性" class="sidebar-link">事件对象属性</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-9" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_21-获取和设置data数据-基础" class="sidebar-link">21.获取和设置data数据—基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-20" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-10" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#获取-设置data" class="sidebar-link">获取&amp;设置data</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#参考代码-3" class="sidebar-link">参考代码</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小结-10" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_22-获取和设置data数据-进阶" class="sidebar-link">22.获取和设置data数据—进阶</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-21" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-11" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#小程序的渲染层与逻辑层" class="sidebar-link">小程序的渲染层与逻辑层</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#相关面试题" class="sidebar-link">相关面试题</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_23-开发和体验成员" class="sidebar-link">23.开发和体验成员</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-22" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#思考-12" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#成员管理" class="sidebar-link">成员管理</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#_24-发布上线" class="sidebar-link">24.发布上线</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#目标-23" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#发布上线流程" class="sidebar-link">发布上线流程</a></li></ul></li><li class="sidebar-sub-header"><a href="/xcx_dx/xcx/01.html#作业" class="sidebar-link">作业</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/04" class="sidebar-heading clickable"><span>4-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/xcx_dx/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day01-小程序基础"><a href="#day01-小程序基础" class="header-anchor">#</a> day01-小程序基础</h1> <h2 id="_01-小程序课程安排-第一天课程内容"><a href="#_01-小程序课程安排-第一天课程内容" class="header-anchor">#</a> 01.小程序课程安排&amp;第一天课程内容</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>了解小程序的课程安排及第一天课程内容。</p> <h3 id="课程安排"><a href="#课程安排" class="header-anchor">#</a> 课程安排</h3> <ul><li>小程序课程安排。
<ul><li>7天原生小程序课程。
<ul><li>3天小程序基础。</li> <li>4天享+社区项目。</li></ul></li> <li>3天uniapp跨端小程序开发课程。</li></ul></li> <li>今日课程安排 。
<ul><li>开发前准备。</li> <li>微信开发者工具。</li> <li>第一个小程序项目。</li> <li>小程序的目录结构。</li> <li>样式及相应式布局。</li> <li>小程序事件。</li> <li>小程序配置。</li> <li>发布上线。</li></ul></li></ul> <h3 id="课程成果"><a href="#课程成果" class="header-anchor">#</a> 课程成果</h3> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676598706173-51a36224-a67a-4769-bea6-824a580554f3.png#averageHue=%23b0b1b0&amp;clientId=u5608a111-d2d5-4&amp;from=paste&amp;height=569&amp;id=u88ba9101&amp;name=image.png&amp;originHeight=1138&amp;originWidth=644&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=414313&amp;status=done&amp;style=none&amp;taskId=u9cb3772d-66e7-40ab-be8f-c446cea3506&amp;title=&amp;width=322" alt="image.png"><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676598767076-c8024406-3984-49f3-beb4-1f567714a85d.png#averageHue=%2385c1bf&amp;clientId=u5608a111-d2d5-4&amp;from=paste&amp;height=569&amp;id=u35343678&amp;name=image.png&amp;originHeight=1138&amp;originWidth=636&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=612784&amp;status=done&amp;style=none&amp;taskId=ud5e83be7-4a18-4023-8f1d-549e6dd0405&amp;title=&amp;width=318" alt="image.png"></p> <h2 id="_02-开发前准备-账号申请"><a href="#_02-开发前准备-账号申请" class="header-anchor">#</a> 02.开发前准备—账号申请</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>掌握小程序账号申请流程</p> <h3 id="小程序的概念"><a href="#小程序的概念" class="header-anchor">#</a> 小程序的概念</h3> <p>小程序是一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。</p> <ul><li>特点：无需下载（小程序体积非常小（不超过2M），用户感知不到下载的过程)</li> <li>理念：用完即走（用户随时退出小程序，不需要关注小程序本身）</li> <li>入口：扫一扫、搜一下、群聊……</li></ul> <h3 id="注册账号"><a href="#注册账号" class="header-anchor">#</a> 注册账号</h3> <p>开发微信小程序前首先要在<a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer">微信公众平台<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>申请一个小程序账号，通过这个账号对小程序的开发进行管理。<br>浏览器打开 <a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer">微信公众平台<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 网址，点击右上角的 &quot;立即注册&quot; 即可进入到小程序开发账号的注册流程<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303838136-3c590250-4b00-417b-a7d1-a0dc3c6d8702.png#averageHue=%23d7f5e2&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=409&amp;id=ubf8121c7&amp;name=image.png&amp;originHeight=818&amp;originWidth=2218&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=1144048&amp;status=done&amp;style=none&amp;taskId=u1146fa1b-364d-4ebd-bafd-2846f681976&amp;title=&amp;width=1109" alt="image.png"></p> <ol><li><strong>选择注册的帐号类型</strong><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303862015-798ef0f9-2e2a-4913-950b-183a8edcee8d.png#averageHue=%23fdfdfd&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=493&amp;id=u96bfae45&amp;name=image.png&amp;originHeight=986&amp;originWidth=2066&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=246769&amp;status=done&amp;style=none&amp;taskId=u4830c2ed-29ae-4a79-84a4-caf9ff12d0e&amp;title=&amp;width=1033" alt="image.png"></li> <li><strong>填写账号信息</strong></li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303910515-3fa43952-c6e1-46eb-b8b4-7097f01b64a8.png#averageHue=%23fcfcfc&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=599&amp;id=u5432a4ac&amp;name=image.png&amp;originHeight=1198&amp;originWidth=2006&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=376766&amp;status=done&amp;style=none&amp;taskId=uac8527d3-04b6-4235-bec8-e09081c4d43&amp;title=&amp;width=1003" alt="image.png"><br> <br><strong>注意：这里要注意所填写的邮箱要求曾经没有注册过小程序、服务器、订阅号。</strong></p> <ol start="3"><li><strong>邮箱激活</strong></li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303941354-5fd7e3c1-ee8a-4549-85b2-dea7dfb04375.png#averageHue=%23fafcf4&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=718&amp;id=u609e3bf9&amp;name=image.png&amp;originHeight=1436&amp;originWidth=2312&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=247956&amp;status=done&amp;style=none&amp;taskId=u5f0f67eb-064f-4544-9201-4c1066ae23a&amp;title=&amp;width=1156" alt="image.png"></p> <ol start="4"><li><strong>点击链接激活账号</strong><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303958538-031028cd-e374-45c4-b2a3-6c0181dbbef5.png#averageHue=%23fafafa&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=268&amp;id=ue9ae69c7&amp;name=image.png&amp;originHeight=536&amp;originWidth=822&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=116037&amp;status=done&amp;style=none&amp;taskId=u482d33eb-eb85-4f34-a709-d5d47b1fcfc&amp;title=&amp;width=411" alt="image.png"></li> <li><strong>选择主体类型</strong><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303972584-a1f64680-92c1-4983-b172-619a128bbbb6.png#averageHue=%23fafafa&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=688&amp;id=u1a6bc97b&amp;name=image.png&amp;originHeight=1375&amp;originWidth=2037&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=520782&amp;status=done&amp;style=none&amp;taskId=u520aa43f-b646-4e98-8f4d-bd5d44ba34f&amp;title=&amp;width=1018.5" alt="image.png"></li> <li><strong>主体登记信息</strong></li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675303989755-a2ccf1bd-b137-407a-af99-c4f3048daa66.png#averageHue=%23fafafa&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=784&amp;id=u2e2320d1&amp;name=image.png&amp;originHeight=1568&amp;originWidth=2035&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=423071&amp;status=done&amp;style=none&amp;taskId=u4c6983a1-f862-4543-862a-f9c77fd0a6c&amp;title=&amp;width=1017.5" alt="image.png"></p> <p>:::success
<strong>注意：使用自已的微信扫码将自已设置为小程序账号的管理员，将来对小程序的开发及设置进行管理。</strong>
:::</p> <h2 id="_03-开发前准备-完善信息-获取appid"><a href="#_03-开发前准备-完善信息-获取appid" class="header-anchor">#</a> 03.开发前准备—完善信息&amp;获取appid</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>掌握小程序appid的获取</p> <h3 id="完善小程序信息"><a href="#完善小程序信息" class="header-anchor">#</a> 完善小程序信息</h3> <p>账号注册完毕后不能立刻使用，还需要进一步对小程序的信息进行完善，若未填写则无法发布。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1677052492914-46dd5c54-2a81-49d4-b69c-da3439b574f9.png#averageHue=%23fdfdfc&amp;clientId=u23afc0f3-fceb-4&amp;from=paste&amp;height=369&amp;id=ufceb35ff&amp;name=image.png&amp;originHeight=738&amp;originWidth=1020&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=101709&amp;status=done&amp;style=none&amp;taskId=uf1cf3b6c-78fe-4d66-b41f-c1ec4cc7b44&amp;title=&amp;width=510" alt="image.png"><br>填写位置：管理后台——首页<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304025886-69e43330-f151-4782-ab87-cb6ba3c26163.png#averageHue=%2320ac45&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=222&amp;id=uc365c049&amp;name=image.png&amp;originHeight=331&amp;originWidth=859&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=55000&amp;status=done&amp;style=none&amp;taskId=ue2632cf3-d398-485d-b316-e049795531c&amp;title=&amp;width=576.5" alt="image.png"><br><strong>注意：在填写小程序类目时不要选择游戏类型，否则视为小游戏开发了。</strong></p> <h3 id="获取appid"><a href="#获取appid" class="header-anchor">#</a> 获取AppID</h3> <p>AppID 是小程序的唯一标识，在对小程序进行开发或者上线发布时都会用到 AppID，获取方式如下图所示：<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304062258-86e4da55-7694-4fe8-b062-918c3b98e2d7.png#averageHue=%23c9decf&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=396&amp;id=ud3e63310&amp;name=image.png&amp;originHeight=791&amp;originWidth=1252&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=146226&amp;status=done&amp;style=none&amp;taskId=u9a7e3a3c-dee2-404f-a2ba-f50a020048b&amp;title=&amp;width=626" alt="image.png"></p> <h2 id="_04-开发前准备-下载-安装微信开发者工具"><a href="#_04-开发前准备-下载-安装微信开发者工具" class="header-anchor">#</a> 04.开发前准备—下载&amp;安装微信开发者工具</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>能独立下载并安装微信开发者工具</p> <h3 id="微信开发者工具介绍"><a href="#微信开发者工具介绍" class="header-anchor">#</a> 微信开发者工具介绍</h3> <p>微信开发者工具是官方提供的专门用于微信小程序开发调试的工具，它提供的主要功能如下：</p> <ul><li>快速创建小程序项目（起到脚手架的作用）</li> <li>代码的查看和编辑（相当于 VSCode 作用）</li> <li>对小程序功能进行调试（相当于浏览器作用）</li> <li>小程序的预览和发布</li></ul> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank" rel="noopener noreferrer">下载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>并安装微信开发者工具，双击下载好的微信开发者工具，然后后根据引导下一步、下一步操作直到完成，首次打开微信开发者工具时需要先进行登录（打开手机微信扫码登录）。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304096142-e3ac1215-96d0-4559-97a5-d7f0d73ee911.png#averageHue=%2373c05c&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=420&amp;id=u2d0fcb71&amp;name=image.png&amp;originHeight=839&amp;originWidth=1718&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=286650&amp;status=done&amp;style=none&amp;taskId=ud95f20b7-537b-46c9-9962-e744ed7959f&amp;title=&amp;width=859" alt="image.png"></p> <h2 id="_05-创建第一个小程序项目"><a href="#_05-创建第一个小程序项目" class="header-anchor">#</a> 05.创建第一个小程序项目</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>能独立创建小程序项目</p> <h3 id="思考"><a href="#思考" class="header-anchor">#</a> 思考</h3> <p>如何创建一个小程序项目？</p> <h3 id="创建小程序"><a href="#创建小程序" class="header-anchor">#</a> 创建小程序</h3> <ol><li>点击 + 号，新建项目</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304138628-a56631ad-15fe-4ecd-b954-9d3c41fe161d.png#averageHue=%232c2c2c&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=375&amp;id=u0f4ac659&amp;name=image.png&amp;originHeight=600&amp;originWidth=800&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=47485&amp;status=done&amp;style=none&amp;taskId=u273f4634-da5f-4772-a4df-1043853b67f&amp;title=&amp;width=500" alt="image.png"></p> <ol start="2"><li>填写项目信息</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304161019-4b2f4ae8-b309-4bab-83c8-09b3b1d636ac.png#averageHue=%233da06a&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=327&amp;id=u024c43e8&amp;name=image.png&amp;originHeight=1200&amp;originWidth=2208&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=461312&amp;status=done&amp;style=none&amp;taskId=u17bfba98-ed29-4b1c-bb62-99be40badf9&amp;title=&amp;width=602" alt="image.png"><br>如上图所示填写信息时 AppID 填写各自申请的小程序账号的 AppID，不使用云开发，选择 Javascript 基础模板。
:::success
<strong>注意：创建小程序的目录必须是空目录且当前电脑要处理联网状态。</strong>
:::</p> <ol start="3"><li>启动小程序项目</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304181291-e93befb3-e80b-4336-9859-b05c58fb7e24.png#averageHue=%23292d35&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=377&amp;id=uf55f242d&amp;name=image.png&amp;originHeight=1404&amp;originWidth=2500&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=867492&amp;status=done&amp;style=none&amp;taskId=u6557f8e4-06fd-4b1a-be47-d3d2fcb5cfe&amp;title=&amp;width=672" alt="image.png"></p> <h2 id="_06-小程序目录结构"><a href="#_06-小程序目录结构" class="header-anchor">#</a> 06.小程序目录结构</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>了解小程序文件类型及每个文件的作用</p> <h3 id="思考-2"><a href="#思考-2" class="header-anchor">#</a> 思考</h3> <p>小程序的界面、样式、逻辑是用啥语言编写的呢？</p> <h3 id="小程序文件类型"><a href="#小程序文件类型" class="header-anchor">#</a> 小程序文件类型</h3> <p>小程序主要提供了 4 种文件类型：</p> <table><thead><tr><th>类型名称</th> <th>作用</th> <th>是否必须存在</th></tr></thead> <tbody><tr><td>.wxml</td> <td>用于页面的布局结构，相当于网页中 .html 文件</td> <td>是</td></tr> <tr><td>.wxss</td> <td>用于页面的样式，相当于网页中的 .css 文件</td> <td>否</td></tr> <tr><td>.js</td> <td>用于页面的逻辑</td> <td>是</td></tr> <tr><td>.json</td> <td>用于页面的配置</td> <td>否</td></tr></tbody></table> <h3 id="文件作用"><a href="#文件作用" class="header-anchor">#</a> 文件作用</h3> <table><thead><tr><th>文件名</th> <th>作用</th> <th>是否必须存在</th></tr></thead> <tbody><tr><td>app.js</td> <td>小程序入口（首先执行的文件）</td> <td>是</td></tr> <tr><td>app.json</td> <td>小程序的<strong>全局配置</strong></td> <td>是</td></tr> <tr><td>app.wxss</td> <td>小程序的<strong>全局样式</strong></td> <td>否</td></tr> <tr><td>project.config.json</td> <td>小程序<strong>开发者工具配置</strong></td> <td>是（会自动创建）</td></tr> <tr><td>sitemap.json</td> <td>小程序搜索优化</td> <td>否</td></tr></tbody></table> <h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <p>1.如何在hello world后面加上！！！，并且将其颜色改成红色？<br>2.小程序的界面、样式、逻辑分别用啥语言编写</p> <ol><li>在wxml对应位置加上！！！，并在wxss中加上对应的属性</li> <li>wxml、wxss、js</li></ol> <h2 id="_7-全局配置-pages"><a href="#_7-全局配置-pages" class="header-anchor">#</a> 7.全局配置—pages</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>掌握全局配置项pages</p> <h3 id="配置文件简介"><a href="#配置文件简介" class="header-anchor">#</a> 配置文件简介</h3> <p>小程序配置文件是一种json格式的文件。</p> <ul><li>作用：可以起到快速新建页面、设定小程序首页、设置窗口样式及设置导航栏和底部tabBar等作用。</li> <li>分类：
<ul><li>全局 app.json</li> <li>页面 page.json</li></ul></li></ul> <h3 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h3> <p>app.json 是当前小程序的全局配置，包括了:</p> <ul><li>小程序首页</li> <li>界面表现</li> <li>网络超时时间</li> <li>底部 tab</li> <li>...等配置</li></ul> <h2 id="_8-全局配置-window"><a href="#_8-全局配置-window" class="header-anchor">#</a> 8.全局配置—window</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>掌握全局配置项window</p> <h3 id="window"><a href="#window" class="header-anchor">#</a> window</h3> <p>用于设置小程序的状态栏、导航条、标题、窗口背景色。</p> <table><thead><tr><th><strong>属性</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> <th><strong>说明</strong></th></tr></thead> <tbody><tr><td>navigationBarTitleText</td> <td>string</td> <td>空白</td> <td>导航栏标题文字内容</td></tr> <tr><td>navigationBarTextStyle</td> <td>string</td> <td>black</td> <td>导航栏标题颜色，仅支持 black / white</td></tr> <tr><td>navigationBarBackgroundColor</td> <td>16 进制颜色</td> <td>#00000</td> <td>导航栏背景颜色，如 #000000</td></tr> <tr><td>navigationStyle</td> <td>string</td> <td>default</td> <td>导航栏样式，仅支持 default / custom</td></tr> <tr><td>enablePullDownRefresh</td> <td>boolean</td> <td>false</td> <td>是否开启全局的下拉刷新</td></tr> <tr><td>... 还有<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window" target="_blank" rel="noopener noreferrer">更多<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td></td> <td></td> <td></td></tr></tbody></table> <h2 id="_9-全局配置-tabbar"><a href="#_9-全局配置-tabbar" class="header-anchor">#</a> 9.全局配置—tabBar</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>掌握底部tabBar配置</p> <h3 id="tabbar"><a href="#tabbar" class="header-anchor">#</a> tabBar</h3> <p>tabBar 定义小程序 tab 栏的表现，如下图即所谓的 tab 栏：<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675334179725-4a41b0ff-d70d-4731-99dc-61db4c5fedb4.png#averageHue=%23efeaea&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=624&amp;id=gCTbp&amp;name=image.png&amp;originHeight=1248&amp;originWidth=2212&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=540584&amp;status=done&amp;style=none&amp;taskId=ucdaed1af-2731-4406-aee9-44a3ed6d4f7&amp;title=&amp;width=1106" alt="image.png"><br>常见配置属性</p> <table><thead><tr><th><strong>属性</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> <th><strong>是否必须</strong></th> <th><strong>说明</strong></th></tr></thead> <tbody><tr><td>list</td> <td>array</td> <td>无</td> <td>是</td> <td>tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab</td></tr> <tr><td>color</td> <td>16 进制颜色</td> <td>无</td> <td>否</td> <td>tab 上的文字默认颜色，仅支持十六进制颜色</td></tr> <tr><td>selectedColor</td> <td>16 进制颜色</td> <td>无</td> <td>否</td> <td>tab 上的文字选中时的颜色，仅支持十六进制颜色</td></tr> <tr><td>backgroundColor</td> <td>16 进制颜色</td> <td>无</td> <td>否</td> <td>tab 的背景色，仅只持 16 进制颜色</td></tr> <tr><td>borderStyle</td> <td>string</td> <td>black</td> <td>否</td> <td>tabbar 上边框的颜色， 仅支持 black / white</td></tr> <tr><td>position</td> <td>string</td> <td>bottom</td> <td>否</td> <td>tabBar 的位置，仅支持 bottom / top</td></tr></tbody></table> <p>上述配置中 list 具体又包含以下内容：</p> <table><thead><tr><th><strong>属性</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> <th><strong>是否必须</strong></th> <th><strong>说明</strong></th></tr></thead> <tbody><tr><td>pagePath</td> <td>string</td> <td></td> <td>是</td> <td>页面路径，必须在 pages 中先定义</td></tr> <tr><td>text</td> <td>string</td> <td></td> <td>是</td> <td>tab 上按钮文字</td></tr> <tr><td>iconPath</td> <td>string</td> <td></td> <td>否</td> <td>图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon</td></tr> <tr><td>selectedIconPath</td> <td>string</td> <td></td> <td>否</td> <td>选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon</td></tr></tbody></table> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span> 
    <span class="token string">&quot;pages/logs/logs&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pages/demo/demo&quot;</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;window&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;小程序示例&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;white&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#f5a11c&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;enablePullDownRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#999&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;selectedColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#e93b3d&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#fff&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;list&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;首页&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/home-default.png&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/home-active.png&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/logs/logs&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;日志&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/video-default.png&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/video-active.png&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;pagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/demo&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;text&quot;</span><span class="token operator">:</span> <span class="token string">&quot;示例&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;iconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/face-default.png&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;selectedIconPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;static/tabbar/face-active.png&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_10-页面配置"><a href="#_10-页面配置" class="header-anchor">#</a> 10.页面配置</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>熟悉页面配置</p> <h3 id="页面配置简介"><a href="#页面配置简介" class="header-anchor">#</a> 页面配置简介</h3> <p>页面配置只针对某个页面生效，如 index.json 是针对 index 页面生效，demo.json 只针对页面 demo 生效</p> <ul><li>不用写window字段</li> <li>优先级比全局配置高</li></ul> <h3 id="pages"><a href="#pages" class="header-anchor">#</a> pages</h3> <ol><li>用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。</li> <li>未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。</li> <li>可以通过先在pages里写页面路径，然后保存的方式来快速新建页面。
注意：新建的页面，如果路径没在pages里面配置，则无法跳转到该页面</li></ol> <p>常用配置</p> <table><thead><tr><th><strong>属性</strong></th> <th><strong>类型</strong></th> <th><strong>默认值</strong></th> <th><strong>是否必须</strong></th> <th><strong>说明</strong></th></tr></thead> <tbody><tr><td>navigationBarTitleText</td> <td>string</td> <td>空白</td> <td>否</td> <td>导航栏标题文字内容</td></tr> <tr><td>navigationBarTextStyle</td> <td>string</td> <td>black</td> <td>否</td> <td>导航栏标题颜色，仅支持 black / white</td></tr> <tr><td>navigationBarBackgroundColor</td> <td>16 进制颜色</td> <td>#00000</td> <td>否</td> <td>导航栏背景颜色，如 #000000</td></tr> <tr><td>navigationStyle</td> <td>string</td> <td>default</td> <td>否</td> <td>导航栏样式，仅支持 default / custom</td></tr> <tr><td>enablePullDownRefresh</td> <td>boolean</td> <td>false</td> <td>否</td> <td>是否开启全局的下拉刷新</td></tr></tbody></table> <p><img src="/xcx_dx/assets/img/全局配置.ec0776ca.jpg" alt="全局配置"></p> <h2 id="_11-调试器和调试"><a href="#_11-调试器和调试" class="header-anchor">#</a> 11.调试器和调试</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>可以利用微信开发者工具进行调试</p> <h3 id="思考-3"><a href="#思考-3" class="header-anchor">#</a> 思考</h3> <p>页面写完后，发现某个元素没显示，或者某个事件没响应，我们应该怎么办？</p> <h3 id="调试器"><a href="#调试器" class="header-anchor">#</a> 调试器</h3> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675335140182-83540652-ca4c-4886-aab3-9f204f38214d.png#averageHue=%232b3038&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=702&amp;id=VKzII&amp;name=image.png&amp;originHeight=1404&amp;originWidth=2500&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=1525681&amp;status=done&amp;style=none&amp;taskId=u091df7ea-e77e-497a-a8f0-f590ad9db32&amp;title=&amp;width=1250" alt="image.png"><br>上图中的 【Wxml】 是用来显示小程序页面的结构和样式，【Console】 控制台，【Network】 查看网络请求，【AppData】 查看组件本地数据，【终端】创建命令行窗口等。</p> <h2 id="_12-编译模式和刷新"><a href="#_12-编译模式和刷新" class="header-anchor">#</a> 12.编译模式和刷新</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>了解开发者工具的编译模式和刷新功能，提高开发效率。</p> <h3 id="编译模式"><a href="#编译模式" class="header-anchor">#</a> 编译模式</h3> <p>编译模式允许开发者指定某个页面来单独开发调试，提高开发效率。编译模式的添加步骤如下：<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675390311955-9dbda110-832b-454d-9e63-0d859f9b76b8.png#averageHue=%234f4f4c&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=416&amp;id=K5qjM&amp;name=image.png&amp;originHeight=832&amp;originWidth=2502&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=558932&amp;status=done&amp;style=none&amp;taskId=u2a9a830e-adad-4e6d-a805-5e80eda9fe1&amp;title=&amp;width=1251" alt="image.png"><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675390426994-c9c5bed1-36f9-4f84-bf99-8e94f68cf934.png#averageHue=%23696867&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=552&amp;id=yYc2v&amp;name=image.png&amp;originHeight=1104&amp;originWidth=1862&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=243247&amp;status=done&amp;style=none&amp;taskId=u5dbc2665-db3c-45f3-bd48-a6ff71f1147&amp;title=&amp;width=931" alt="image.png"></p> <h2 id="_13-实现一个导航布局"><a href="#_13-实现一个导航布局" class="header-anchor">#</a> 13.实现一个导航布局</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>能使用wxml和wxss实现页面的结构与样式</p> <h3 id="思考-4"><a href="#思考-4" class="header-anchor">#</a> 思考</h3> <p>如何在小程序中实现一个如下效果的布局？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675304774549-d9313136-708b-4a18-8809-73462d837f16.png#averageHue=%23f7f6f6&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=108&amp;id=ue35a1c95&amp;name=image.png&amp;originHeight=216&amp;originWidth=632&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=22321&amp;status=done&amp;style=none&amp;taskId=u97dcf20c-2987-4c1a-a838-a5b543cd035&amp;title=&amp;width=316" alt="image.png"></p> <h3 id="布局实现"><a href="#布局实现" class="header-anchor">#</a> 布局实现</h3> <p>要实现这个布局会用到小程序中提供的一些组件（标签）如下表所示：</p> <table><thead><tr><th><strong>组件名（标签）</strong></th> <th><strong>作用</strong></th> <th><strong>与 html 对比</strong></th></tr></thead> <tbody><tr><td>view</td> <td>定义一个块级元素</td> <td>相当于 html 中的 div 标签</td></tr> <tr><td>text</td> <td>定义一个行内元素</td> <td>相当于 html 中的 span 标签</td></tr></tbody></table> <p>关于小程序页面布局中的样式几乎和网页的 css 是一样的，先学习部分选择器的使用，如下表所示：</p> <table><thead><tr><th><strong>选择器</strong></th> <th><strong>示例</strong></th> <th><strong>含义</strong></th></tr></thead> <tbody><tr><td>类选择器</td> <td>.navs</td> <td>根据类名选择元素</td></tr> <tr><td>标签选择器</td> <td>text、view</td> <td>根据标签名选择元素</td></tr> <tr><td>后代选择器</td> <td>.navs text</td> <td>根据标签的嵌套关系选择元素</td></tr></tbody></table> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- pages/index/index.wxml --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>m-nav<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>食品<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>电器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>衣服<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>饮料<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.m-nav</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-around<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.m-nav .active</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #f5a11c<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.m-nav .active::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> -6px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #f5a11c<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><p>:::success
tips: 大家有没有发现样式文件不需要引入到页面当中，它是自动引入并生效的，但是要求<strong>页面文件的名称和样式的文件必须要一致！</strong>
:::</p> <h3 id="小结-2"><a href="#小结-2" class="header-anchor">#</a> 小结</h3> <p>1.wxml中哪两个标签相当于网页开发中的div、span?<br>2.样式文件需要手动导入吗？</p> <ol><li>view、text</li> <li>不需要，自动导入的。但是要求页面文件的名称和样式文件的保持一致</li></ol> <h2 id="_14-小程序适配-响应式单位rpx"><a href="#_14-小程序适配-响应式单位rpx" class="header-anchor">#</a> 14.小程序适配—响应式单位rpx</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>熟练掌握rpx进行响应式布局</p> <h3 id="思考-5"><a href="#思考-5" class="header-anchor">#</a> 思考</h3> <p>网页开发中我们使用rem进行响应式布局，那小程序用什么进行响应式布局呢？</p> <h3 id="响应式布局"><a href="#响应式布局" class="header-anchor">#</a> 响应式布局</h3> <p>一个网站或页面能兼容多个终端。<br>常见实现方式：</p> <ol><li>媒体查询</li> <li>rem</li> <li>%或vw/vh</li> <li>flex弹性布局</li> <li>rpx（小程序独享）</li></ol> <h3 id="响应式单位rpx"><a href="#响应式单位rpx" class="header-anchor">#</a> 响应式单位rpx</h3> <p>rpx (responsive pixel)：规定不管屏幕为多少px，100%的屏幕宽度就是750rpx<br>100%屏幕的宽度 = <strong>750rpx</strong>
:::success
实际开发当中设计稿的尺寸都是【以 750px 做为基准】，因此只需要将设计稿中看到的尺寸写成相应的 rpx 即可。参考:<a href="https://app.mockplus.cn/app/j_GNzKnly_/design" target="_blank" rel="noopener noreferrer">https://app.mockplus.cn/app/j_GNzKnly_/design<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
:::</p> <h3 id="其它支持的css单位"><a href="#其它支持的css单位" class="header-anchor">#</a> 其它支持的css单位</h3> <ul><li>px</li> <li>em</li> <li>vw/vh</li> <li>rpx</li> <li>rem  (但是固定1rem的长度是16px，不推荐使用)</li></ul> <h3 id="小结-3"><a href="#小结-3" class="header-anchor">#</a> 小结</h3> <ol><li>375rpx是50%的屏幕宽度还是父元素宽度？<br>2. 1vw等于多少rpx</li> <li>屏幕宽度</li> <li>7.5</li></ol> <h2 id="_15-wxss引入资源"><a href="#_15-wxss引入资源" class="header-anchor">#</a> 15.wxss引入资源</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>掌握wxss中引入外部资源的方式</p> <h3 id="思考-6"><a href="#思考-6" class="header-anchor">#</a> 思考</h3> <p>如果想给一个盒子添加背景图片，wxss的用法和css一样吗？</p> <h3 id="wxss中使用图片"><a href="#wxss中使用图片" class="header-anchor">#</a> wxss中使用图片</h3> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675394679244-32ce78f3-dcd1-408e-b4c1-b03aff22b180.png#averageHue=%23393a39&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=564&amp;id=ucda5ee49&amp;name=image.png&amp;originHeight=1128&amp;originWidth=1236&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=488277&amp;status=done&amp;style=none&amp;taskId=u2b09d598-b99a-4078-afc8-cc570209102&amp;title=&amp;width=618" alt="image.png">
:::success
wxss中不可以使用本地图片资源，可以使用网络图片，或者将图片转成base64。
:::</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.ctn</span><span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://www.itheima.com/images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="wxss中使用字体图标"><a href="#wxss中使用字体图标" class="header-anchor">#</a> wxss中使用字体图标</h3> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675395438612-8d63f2ec-ec2b-4b04-ba50-459a4969d88d.png#averageHue=%23373b37&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=518&amp;id=uc1918a02&amp;name=image.png&amp;originHeight=1036&amp;originWidth=1526&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=549245&amp;status=done&amp;style=none&amp;taskId=u18d06d8a-7a98-48ce-bc9b-99d19d02f11&amp;title=&amp;width=763" alt="image.png">
:::success
wxss中使用字体图标时，字体资源必须是在线链接
:::</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;iconfont&quot;</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'//at.alicdn.com/t/c/font_3509481_3gqwsneat14.woff2?t=1675394145994'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
       <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'//at.alicdn.com/t/c/font_3509481_3gqwsneat14.woff?t=1675394145994'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
       <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'//at.alicdn.com/t/c/font_3509481_3gqwsneat14.ttf?t=1675394145994'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.iconfont</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;iconfont&quot;</span> <span class="token important">!important</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
  <span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.icon-clock:before</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;\e74b&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="小结-4"><a href="#小结-4" class="header-anchor">#</a> 小结</h3> <p>wxss中可以使用本地图片做背景图吗？可以使用本地字体文件以使用字体图标吗？不可以。wxss中的图片只能是线上地址或者base64，字体文件必须是远程的地址。</p> <h2 id="_16-模板语法-数据绑定"><a href="#_16-模板语法-数据绑定" class="header-anchor">#</a> 16.模板语法—数据绑定</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>掌握小程序插值表达式</p> <h3 id="思考-7"><a href="#思考-7" class="header-anchor">#</a> 思考</h3> <p>小程序也是数据驱动视图，那数据绑定的语法和vue一样吗？</p> <h3 id="数据绑定的步骤"><a href="#数据绑定的步骤" class="header-anchor">#</a> 数据绑定的步骤</h3> <ol><li>在data中定义数据</li> <li>在模板中使用数据mustache(插值表达式)语法<view></view></li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    属性<span class="token number">1</span>： <span class="token string">&quot;值1&quot;</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p><img src="/xcx_dx/assets/img/image-20221010160414579.27946f99.png" alt=""></p> <h3 id="应用场景"><a href="#应用场景" class="header-anchor">#</a> 应用场景</h3> <ol><li>绑定内容<view></view></li> <li><code>绑定属性&lt;image src=&quot;&quot;/&gt;演示图片地址：[https://www.itheima.com/images/logo.png](https://www.itheima.com/images/logo.png)</code></li> <li>运算（三元运算，算术运算等）<view>NaN</view></li></ol> <h3 id="小结-5"><a href="#小结-5" class="header-anchor">#</a> 小结</h3> <ol><li>小程序中data是函数还是对象?<br>2. 小程序属性绑定时需要用双大括号吗?</li> <li>对象</li> <li>需要</li></ol> <h2 id="_17-小程序事件-基础"><a href="#_17-小程序事件-基础" class="header-anchor">#</a> 17.小程序事件—基础</h2> <h3 id="目标-17"><a href="#目标-17" class="header-anchor">#</a> 目标</h3> <p>掌握小程序事件用法</p> <h3 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h3> <p>事件是视图层到逻辑层的通讯方式。负责将用户对于的页面的操作通知给js。用户在页面中所有的行为，如点击按钮，滑动页面，都需要靠事件传递给js进行处理</p> <h3 id="事件绑定语法"><a href="#事件绑定语法" class="header-anchor">#</a> 事件绑定语法</h3> <p>小程序中绑定事件的语法有两种，分别为</p> <ol><li>【bind事件名=&quot;事件回调&quot;】（如<view bindtap="handleTap"></view>)</li> <li>【bind:事件名=&quot;事件回调&quot;】 （如<view bind:tap="handleTap"></view>)
:::success
小程序中大部分事件类型与网页中一致，如 blur、focus、change 等，但是<strong>点击</strong>事件在小程序**不是使用 click <strong>事件类型，取而代之的是</strong> tap **事件类型。
:::</li></ol> <h3 id="事件捕获与冒泡"><a href="#事件捕获与冒泡" class="header-anchor">#</a> 事件捕获与冒泡</h3> <ul><li>小程序事件也有捕获和冒泡阶段。bind 是用于绑定事件冒泡的，capture 是用于绑定事件捕获的。<strong>capture-bind</strong>只能用冒号形式。</li> <li>如果想阻止事件冒泡或捕获可通过catch来绑定事件。如catchtap，capture-catch:tap。</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675324478096-f5d4912d-d21e-4d32-b1dd-28be8c175b4a.png#averageHue=%23f6f6f6&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=325&amp;id=ueffc81fa&amp;name=image.png&amp;originHeight=650&amp;originWidth=752&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=32098&amp;status=done&amp;style=none&amp;taskId=ufa66be6e-d277-4107-805a-afc5b99f73f&amp;title=&amp;width=376" alt="image.png"></p> <p><img src="/xcx_dx/assets/img/image-20221017180904959.53c8e44a.png" alt=""></p> <h3 id="回调函数"><a href="#回调函数" class="header-anchor">#</a> 回调函数</h3> <p>事件的回调函数和data平级</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;小明&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">logo</span><span class="token operator">:</span> <span class="token string">&quot;https://www.itheima.com/images/logo.png&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">15000</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">handleTap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;试试就试试&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>:::success
<strong>注意:</strong><br>做为对比 Vue 学习，Vue 中方法都是定义在 methods 属性当中，小程序页面中则是直接定义的，这点大家一定要注意区分。
:::</p> <h3 id="小结-6"><a href="#小结-6" class="header-anchor">#</a> 小结</h3> <p>1.小程序中点击事件是？<br>2.小程序中事件需要放入到methods里吗？</p> <ol><li>tap</li> <li>不用，应和data平级</li></ol> <h2 id="_18-小程序事件-事件传参1"><a href="#_18-小程序事件-事件传参1" class="header-anchor">#</a> 18.小程序事件—事件传参1</h2> <h3 id="目标-18"><a href="#目标-18" class="header-anchor">#</a> 目标</h3> <p>掌握小程序事件传参方式</p> <h3 id="思考-8"><a href="#思考-8" class="header-anchor">#</a> 思考</h3> <p>如下图，有个虚拟键盘，要求点击某个元素的时候就输出里面的数字，如何实现？<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676625876459-18681234-0b16-4094-80b3-cef3507d820f.png#averageHue=%23f2f2f2&amp;clientId=uafaf5447-ae16-4&amp;from=paste&amp;height=194&amp;id=u39bf26d8&amp;name=image.png&amp;originHeight=388&amp;originWidth=664&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=22289&amp;status=done&amp;style=none&amp;taskId=udba20933-532d-45f1-9a49-5dd135ca025&amp;title=&amp;width=332" alt="image.png"><br><strong>参考代码</strong></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    1
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    2
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    3
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.wrap</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.item</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 33%<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 100rpx<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #eee<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 1px solid #eee<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><h3 id="事件传参格式"><a href="#事件传参格式" class="header-anchor">#</a> 事件传参格式</h3> <p><img src="/xcx_dx/assets/img/image-20220909175104944.96df7a13.png" alt=""></p> <h3 id="代码实现"><a href="#代码实现" class="header-anchor">#</a> 代码实现</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>printNum<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    1
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>printNum<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    2
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-num</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>printNum<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    3
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// ev是事件对象，一般命名e/ev/event</span>
  <span class="token function">printNum</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> num <span class="token operator">=</span> ev<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>num<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>:::success
<strong>错误写法</strong>： <view bindtap="printNum(1)"></view> 小程序会以为 事件函数名称就是 “printNum(1)” ，那么它就会去找“printNum(1)” 这个函数 而不是 “printNum”
:::</p> <h3 id="小结-7"><a href="#小结-7" class="header-anchor">#</a> 小结</h3> <p>小程序传参时怎么获取元素上的自定义属性？通过事件对象(event)下的currentTarget里的dataset里取</p> <h2 id="_19-小程序事件-事件传参2"><a href="#_19-小程序事件-事件传参2" class="header-anchor">#</a> 19.小程序事件—事件传参2</h2> <h3 id="目标-19"><a href="#目标-19" class="header-anchor">#</a> 目标</h3> <p>掌握target及currentTarget的区别。</p> <h3 id="思考-9"><a href="#思考-9" class="header-anchor">#</a> 思考</h3> <p>虚拟键盘的每个元素上都绑定一个事件，代码写起来好臃肿啊，能利用冒泡机制把事件统一绑定到父元素上吗？<br><strong>参考代码</strong></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;wrap&quot;</span> bindtap<span class="token operator">=</span><span class="token string">&quot;printNum&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item&quot;</span> data<span class="token operator">-</span>num<span class="token operator">=</span><span class="token string">&quot;1&quot;</span><span class="token operator">&gt;</span>
    <span class="token number">1</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item&quot;</span> data<span class="token operator">-</span>num<span class="token operator">=</span><span class="token string">&quot;2&quot;</span><span class="token operator">&gt;</span>
    <span class="token number">2</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;item&quot;</span> data<span class="token operator">-</span>num<span class="token operator">=</span><span class="token string">&quot;3&quot;</span><span class="token operator">&gt;</span>
    <span class="token number">3</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
</code></pre></div><h3 id="target-vs-currenttarget"><a href="#target-vs-currenttarget" class="header-anchor">#</a> target vs currentTarget</h3> <p>target：事件发生地。事件真实发生的元素。<br>currentTarget: 事件绑定地。bind事件书写的那个元素。</p> <h3 id="小结-8"><a href="#小结-8" class="header-anchor">#</a> 小结</h3> <p>事件绑定地是？事件发生地是？target是事件的发生地，currentTarget是事件的绑定地</p> <h3 id="事件对象属性"><a href="#事件对象属性" class="header-anchor">#</a> 事件对象属性</h3> <table><thead><tr><th><strong>属性</strong></th> <th><strong>类型</strong></th> <th><strong>说明</strong></th></tr></thead> <tbody><tr><td>type</td> <td>String</td> <td>事件类型</td></tr> <tr><td>timeStamp</td> <td>Integer</td> <td>页面打开到触发事件所经过的毫秒数</td></tr> <tr><td>target</td> <td>Object</td> <td>触发事件的组件的一些属性值集合</td></tr> <tr><td>currentTarget</td> <td>Object</td> <td>当前组件的一些属性值集合</td></tr> <tr><td>detail</td> <td>Object</td> <td>额外的信息</td></tr> <tr><td>mark</td> <td>Object</td> <td>承载额外数据</td></tr> <tr><td>touches</td> <td>Array</td> <td>触摸事件，当前停留在屏幕中的触摸点信息的数组</td></tr> <tr><td>changedTouches</td> <td>Array</td> <td>触摸事件，当前变化的触摸点信息的数组</td></tr></tbody></table> <h3 id="小结-9"><a href="#小结-9" class="header-anchor">#</a> 小结</h3> <p>mark和dataset的区别是？mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值</p> <h2 id="_21-获取和设置data数据-基础"><a href="#_21-获取和设置data数据-基础" class="header-anchor">#</a> 21.获取和设置data数据—基础</h2> <h3 id="目标-20"><a href="#目标-20" class="header-anchor">#</a> 目标</h3> <p>熟练掌握小程序中获取和设置data的方式</p> <h3 id="思考-10"><a href="#思考-10" class="header-anchor">#</a> 思考</h3> <p>小程序的data是一个对象，不同于vue的data是一个函数，那小程序中如何获取和设置data里的数据呢？</p> <h3 id="获取-设置data"><a href="#获取-设置data" class="header-anchor">#</a> 获取&amp;设置data</h3> <ul><li>获取
<ul><li>在视图中： </li> <li>在js代码中： this.data.属性名</li></ul></li> <li>设置</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  属性名<span class="token number">1</span>： 新值<span class="token number">1</span>，
  属性名<span class="token number">2</span>： 新值<span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">handleAdd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取data里的数据</span>
    <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num<span class="token punctuation">;</span>
    <span class="token comment">// 更新</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token operator">++</span>num<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>当前值为：{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleAdd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我+1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="小结-10"><a href="#小结-10" class="header-anchor">#</a> 小结</h3> <p>获取data中的数据是this.xxx 还是 this.data.xxxthis.data.xxx</p> <h2 id="_22-获取和设置data数据-进阶"><a href="#_22-获取和设置data数据-进阶" class="header-anchor">#</a> 22.获取和设置data数据—进阶</h2> <h3 id="目标-21"><a href="#目标-21" class="header-anchor">#</a> 目标</h3> <p>了解小程序的双线程模型</p> <h3 id="思考-11"><a href="#思考-11" class="header-anchor">#</a> 思考</h3> <p>小程序里直接通过this.data.xxx = &quot;yyy&quot; 来设置数据可以吗？</p> <h3 id="小程序的渲染层与逻辑层"><a href="#小程序的渲染层与逻辑层" class="header-anchor">#</a> 小程序的渲染层与逻辑层</h3> <ol><li>WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层</li> <li>小程序的渲染层和逻辑层分别由2个线程管理，两个线程的通信会经由微信客户端做中转</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675329284929-63132a70-d258-4f4f-b252-7b4a8926da3b.png#averageHue=%23f8f8f8&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=622&amp;id=u25a8cca5&amp;name=image.png&amp;originHeight=1244&amp;originWidth=1690&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=461624&amp;status=done&amp;style=none&amp;taskId=u593afe36-0172-472d-a814-ec992a7fee7&amp;title=&amp;width=845" alt="image.png">
:::success
注意：直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致.
:::</p> <h3 id="相关面试题"><a href="#相关面试题" class="header-anchor">#</a> 相关面试题</h3> <p>小程序有哪些提升性能的方式？</p> <ol><li>减少this.setData的调用次数，可以将多次setData合并为一次。</li> <li>减少每次setData的数据传输量，每次尽量精确传输只发生更改的数据。</li></ol> <p><img src="/xcx_dx/assets/img/setData优化方式.e668a9a2.jpg" alt=""></p> <h2 id="_23-开发和体验成员"><a href="#_23-开发和体验成员" class="header-anchor">#</a> 23.开发和体验成员</h2> <h3 id="目标-22"><a href="#目标-22" class="header-anchor">#</a> 目标</h3> <p>掌握如何添加共同开发者及添加体验成员。</p> <h3 id="思考-12"><a href="#思考-12" class="header-anchor">#</a> 思考</h3> <p>为啥我生成的小程序二维码别人体验不了呢？怎么让他们也能体验我开发的小程序呢？</p> <h3 id="成员管理"><a href="#成员管理" class="header-anchor">#</a> 成员管理</h3> <p>登录<a href="https://mp.weixin.qq.com" target="_blank" rel="noopener noreferrer">微信公众平台<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，找到“管理”—&gt;“成员管理”<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675391097346-8378d46a-0970-4aef-9bac-99831265732f.png#averageHue=%23b2dbb6&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=513&amp;id=udf880edb&amp;name=image.png&amp;originHeight=1026&amp;originWidth=2632&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=332157&amp;status=done&amp;style=none&amp;taskId=u0d5198e4-b8a0-4e50-ad73-87e38a39328&amp;title=&amp;width=1316" alt="image.png"><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675391184807-18b2f186-045e-4ac6-8721-dccd98e3894b.png#averageHue=%23fbfbfb&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=573&amp;id=u022f1302&amp;name=image.png&amp;originHeight=1146&amp;originWidth=1164&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=103113&amp;status=done&amp;style=none&amp;taskId=u17739c22-9e77-4b6b-af0b-b94fb7f1e69&amp;title=&amp;width=582" alt="image.png"><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675391225443-a06a9d63-8021-4bb9-8a79-ef98bb07ce51.png#averageHue=%23aab1a8&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=297&amp;id=u9129f2a4&amp;name=image.png&amp;originHeight=594&amp;originWidth=2038&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=289131&amp;status=done&amp;style=none&amp;taskId=ua68ef575-9ec1-4bd3-b305-dae4367a718&amp;title=&amp;width=1019" alt="image.png">
:::success
一般只给相关开发人员添加开发者权限，其他人员（如测试、产品等）添加为体验成员即可。
:::</p> <h2 id="_24-发布上线"><a href="#_24-发布上线" class="header-anchor">#</a> 24.发布上线</h2> <h3 id="目标-23"><a href="#目标-23" class="header-anchor">#</a> 目标</h3> <p>掌握小程序发布上线流程</p> <h3 id="发布上线流程"><a href="#发布上线流程" class="header-anchor">#</a> 发布上线流程</h3> <ol><li>开发者工具上点击“上传”并填写版本及说明信息。</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675392698485-8e5f049c-a739-4232-97a2-681abe676b3d.png#averageHue=%23484947&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=145&amp;id=u2988f47c&amp;name=image.png&amp;originHeight=290&amp;originWidth=1894&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=145931&amp;status=done&amp;style=none&amp;taskId=ucb3f3ff6-7dc7-473e-9a95-c4f1a921f65&amp;title=&amp;width=947" alt="image.png"><br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675392780588-291ed896-d3c4-407c-af52-f01ba794194a.png#averageHue=%233b3c3b&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=248&amp;id=uc64c8c09&amp;name=image.png&amp;originHeight=496&amp;originWidth=1088&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=96938&amp;status=done&amp;style=none&amp;taskId=ud8c40700-a841-450b-884e-0fdcf18c21f&amp;title=&amp;width=544" alt="image.png"></p> <ol start="2"><li>选为体验版。提交审核之前，最好先发一个体验版二维码出来，让公司的测试、产品、领导等相关人员都体验一下，再次确认小程序有没有什么问题及是否符合预期。</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675393347966-263a81bf-efce-4ced-be73-ebfd857867ba.png#averageHue=%2352ca89&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=665&amp;id=u4c723883&amp;name=image.png&amp;originHeight=1330&amp;originWidth=2716&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=463822&amp;status=done&amp;style=none&amp;taskId=u4e1e88a6-5916-4c33-8963-1c0c6634df0&amp;title=&amp;width=1358" alt="image.png"></p> <ol start="3"><li>提交审核。小程序全面测试完毕后还需要提交给小程序官方审核，主要是看小程序<a href="https://developers.weixin.qq.com/community/develop/doc/000c266f094ab00976ad5c0d251809" target="_blank" rel="noopener noreferrer">有无违规的内容<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675393391730-d6543ad5-7838-4a6c-a4c0-5e69ceabecd6.png#averageHue=%23fcf7f2&amp;clientId=u6b58fa3d-1dad-4&amp;from=paste&amp;height=185&amp;id=u624d9d79&amp;name=image.png&amp;originHeight=370&amp;originWidth=2018&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=101016&amp;status=done&amp;style=none&amp;taskId=u1dbb1020-3674-42ed-b0f6-5c5497973cd&amp;title=&amp;width=1009" alt="image.png"></p> <ol start="4"><li>发布。审核通过后就可发布小程序了，发布成功后所有用户都可以在小程序应用商品中找到我们开发的小程序了。</li></ol> <h2 id="作业"><a href="#作业" class="header-anchor">#</a> 作业</h2> <ol><li>完成以下页面布局</li> <li><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675419022381-81f72ddf-c533-4671-bac0-57250ab321f1.png#averageHue=%23fafafa&amp;clientId=u341542ba-ca1e-4&amp;from=paste&amp;height=42&amp;id=u714cd720&amp;name=image.png&amp;originHeight=84&amp;originWidth=704&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=6394&amp;status=done&amp;style=none&amp;taskId=u82a17594-55ba-4546-a394-63899030dc4&amp;title=&amp;width=352" alt="image.png">导航栏实现动态点击效果</li> <li>完成页面及底部tabBar配置</li> <li>生成体验版，并添加同桌为共同开发者。</li> <li>整理今天课程内容，输出xmind</li></ol> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1675418949215-60697736-b885-4576-9339-1fad626bf274.png#averageHue=%23e5e5e2&amp;clientId=u341542ba-ca1e-4&amp;from=paste&amp;height=675&amp;id=u6069e875&amp;name=image.png&amp;originHeight=1350&amp;originWidth=764&amp;originalType=binary&amp;ratio=1&amp;rotation=0&amp;showTitle=false&amp;size=287425&amp;status=done&amp;style=none&amp;taskId=u136edf14-fa12-4b8c-98ae-3ca78594052&amp;title=&amp;width=382" alt="image.png"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/xcx_dx/xcx/02.html">
        day02-小程序基础
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/xcx_dx/assets/js/app.c36966b9.js" defer></script><script src="/xcx_dx/assets/js/2.13776caa.js" defer></script><script src="/xcx_dx/assets/js/3.9977063c.js" defer></script>
  </body>
</html>
